<template>
  <div class="add-product-wrapper">
    <el-form label-width="108px" :model="form" ref="form" :rules="rules">
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>基本信息</span>
        </div>
        <el-row>
          <el-col :span="numberI">
            <el-form-item :label="pmsFieldList.productName" prop="name">
              <el-input v-model="form.name" :label="pmsFieldList.productName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="numberI">
            <el-form-item label="简介" prop="brief">
              <el-input v-model="form.brief" placeholder="请输入简介"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="numberI">
            <el-form-item label="简介2" prop="brief2">
              <el-input v-model="form.brief2" placeholder="请输入简介2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="numberI2">
            <el-form-item :label="pmsFieldList.oldName" prop="outProductId">
              <el-select v-model="form.old" :placeholder="'请选择'+pmsFieldList.oldName" clearable size="small">
                <el-option
                  v-for="dict in dict.type.old"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="numberI">
            <el-form-item :label="pmsFieldList.otherName" prop="other">
              <el-select v-model="form.other" :placeholder="'请选择'+pmsFieldList.otherName" clearable size="small">
                <el-option
                  v-for="dict in dict.type.is_other"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="numberI">
            <el-form-item :label="pmsFieldList.cupsName" prop="cups">

              <el-select v-model="form.cups" :placeholder="'请选择'+pmsFieldList.cupsName" clearable size="small">
                <el-option
                  v-for="dict in dict.type.cups"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="numberI">
            <el-form-item :label="pmsFieldList.heightName" prop="height">
              <el-select v-model="form.height" :placeholder="'请选择'+pmsFieldList.heightName" clearable size="small">
                <el-option
                  v-for="dict in dict.type.height"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="numberI">
            <el-form-item :label="pmsFieldList.cityName" prop="region">
              <el-select v-model="form.region" :placeholder="'请选择'+pmsFieldList.cityName" clearable size="small">
                <el-option
                  v-for="dict in dict.type.region"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="numberI">
            <el-form-item :label="pmsFieldList.weightName" prop="weight">
              <el-select v-model="form.weight" :placeholder="'请选择'+pmsFieldList.weightName" clearable size="small">
                <el-option
                  v-for="dict in dict.type.weight"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="numberI">-->
          <!--            <el-form-item label="体重" prop="weight">-->
          <!--              <el-input v-model="form.weight" placeholder="体重"></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="numberI">-->
          <!--            <el-form-item label="民族" prop="weight">-->
          <!--              <el-input v-model="form.weight" placeholder="体重"></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>

        <el-row>
          <el-col :span="numberI">
            <el-form-item label="上架状态">
              <DictRadio v-model="form.publishStatus" size="small"
                         :radioData="dict.type.pms_publish_status"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>seo设置</span>
        </div>

        <el-row>
          <el-col :span="numberI2">
            <el-form-item label="标题" prop="seoTitle">
              <el-input v-model="form.seoTitle" placeholder="请输入标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="numberI2">
            <el-form-item label="关键词" prop="seoKeys">
              <el-input v-model="form.seoKeys" placeholder="请输入关键词"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="内容" prop="seoDesc">
              <el-input v-model="form.seoDesc" placeholder="请输入内容" type="text"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>产品图片</span>
        </div>
        <el-form-item label="主图" prop="pic">
          <image-upload v-model="form.pic" :limit="1"></image-upload>
        </el-form-item>
        <el-form-item label="轮播图" prop="albumPics">
          <image-upload v-model="albumPics" :limit="5"></image-upload>
        </el-form-item>
      </el-card>

      <!--      <el-card style="margin: 20px 20px; font-size: 14px">-->
      <!--        <div slot="header">-->
      <!--          <span>产品规格</span>-->
      <!--        </div>-->
      <!--        <el-form-item label="规格类型">-->
      <!--          <div class="sku-wrapper">-->
      <!--            <div class="sku_sorts">-->
      <!--              <div class="sku_sort" v-for="(s, idx0) in productAttr" :key="s.name">-->
      <!--                <div class="label flex-center">-->
      <!--                  <div class="flex-one">-->
      <!--                    <dict-select v-model="s.name" prop-name="sku_sort_list" value-prop="label"></dict-select>-->
      <!--                  </div><a class="red" @click="deleteSkuSort(idx0)">删除规格类型</a>-->
      <!--                </div>-->
      <!--                <div class="values" v-if="s.name">-->
      <!--                  <div class="value" v-for="(it2, idx1) in s.options" :key="idx1">-->
      <!--                    <el-input :value="it2.name" @input="changeName(s, idx1, $event)" placeholder="请输入规格名称"></el-input><a class="red no-break ml8" v-if="idx1 < s.options.length - 1 || (s.options.length === maxOptionNum &amp;&amp; idx1 === 3)" @click="deleteOption(s, idx1)">删除</a>-->
      <!--                  </div>-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--            <el-button v-if="productAttr.length < 2" @click="addSkuSort">+添加规格类型</el-button>-->
      <!--          </div>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="规格信息">-->
      <!--          <el-button @click="refreshSku()" class="mb20">刷新列表</el-button>-->
      <!--          <el-table :data="form.skuList" :max-height="400">-->
      <!--            <el-table-column v-for="s in skuAttr" :label="s.name" :key="s.name" :prop="s.name"></el-table-column>-->
      <!--            <el-table-column label="展示图片">-->
      <!--              <template v-slot="{ row }">-->
      <!--                <image-upload class="img-upload-mini" v-model="row.pic" :limit="1" :is-show-tip="false"></image-upload>-->
      <!--              </template>-->
      <!--            </el-table-column>-->
      <!--            <el-table-column label="销售价格" >-->
      <!--              <template v-slot="{ row,$index }">-->
      <!--                <el-form-item-->
      <!--                  :rules="{ required: true, message: '请填写价格', trigger: 'blur' }"-->
      <!--                  :prop="'skuList['+$index+'].price'">-->
      <!--                  <el-input v-model="row.price"></el-input>-->
      <!--                </el-form-item>-->
      <!--              </template>-->
      <!--            </el-table-column>-->
      <!--            <el-table-column label="库存">-->
      <!--              <template v-slot="{ row, $index }">-->
      <!--                <el-input v-model="row.stock" type="number"></el-input>-->
      <!--              </template>-->
      <!--            </el-table-column>-->
      <!--            <el-table-column label="编码">-->
      <!--              <template v-slot="{ row }">-->
      <!--                <el-form-item>-->
      <!--                  <el-input v-model="row.outSkuId"></el-input>-->
      <!--                  <el-input v-model="row.spData" v-show="false"></el-input>-->
      <!--                </el-form-item>-->
      <!--              </template>-->
      <!--            </el-table-column>-->
      <!--          </el-table>-->
      <!--        </el-form-item>-->
      <!--      </el-card>-->

      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>详情页</span>
        </div>
        <!--        <el-form-item label="移动端" prop="detailMobileHtml">-->
        <!--          <Editor v-model="form.detailMobileHtml" placeholder="请输入内容" type="url"></Editor>-->
        <!--        </el-form-item>-->
        <el-form-item label="PC端" prop="detailHtml">
          <Editor v-model="form.detailHtml" placeholder="请输入内容" type="url"></Editor>
        </el-form-item>

      </el-card>

      <div class="tc">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { addPmsProduct, getPmsProduct, updatePmsProduct } from '@/api/pms/product'
import ProductCategorySelect from '@/views/components/ProductCategorySelect'
import BrandSelect from '@/views/components/BrandSelect'
import axios from 'axios'

export default {
  name: 'AddProduct',
  dicts: ['pms_publish_status', 'is_other', 'cups', 'region', 'height', 'old', 'weight'],
  components: { BrandSelect, ProductCategorySelect },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ]
      },
      form: {
        publishStatus: 0,
        sort: 1000
      },
      skuAttr: [],
      albumPics: null,
      productAttr: [
        {
          name: '颜色',
          options: [
            { name: '红' },
            { name: null }
          ]
        }
      ],
      maxOptionNum: 44,
      numberI : 8,
      numberI2 : 12,
      pmsFieldList: {},
      BaseUrl: 'https://api.suai777.com/'
    }
  },
  created() {
    if(this.getDeviceType()){
      this.numberI = 24
      this.numberI2 = 24
    }else
    {
      this.numberI = 8
      this.numberI2 = 12
    }
    const { id } = this.$route.query
    this.pmsField()
    if (id) {
      this.getInfo(id)
    }
  },
  methods: {
    getDeviceType () {
      // 优先宽度判断
      return  window.innerWidth < 768;

    },
    pmsField() { // 获取系统设置
      axios.get(this.BaseUrl + 'h5/pmsField/list?page=0&size=1')
        .then(response => {
          this.pmsFieldList = response.data.content[0]

        })
        .catch(error => {
          console.error('Error:', error)
        })
    },
    refreshSku() {
      let skus = []
      let skuMap = new Map()
      this.skuAttr = [...this.productAttr]
      if (this.form.skuList) {
        this.form.skuList.forEach(sku => {
          skuMap.set(sku.spData, sku)
        })
      }
      this.productAttr.forEach((attr, index) => {
        const attrSku = []
        attr.options.forEach((option) => {
          if (!option.name) {
            return
          }
          if (index === 0) {
            attrSku.push({ [attr.name]: option.name })
          } else {
            skus.forEach(it3 => {
              attrSku.push({ ...it3, [attr.name]: option.name })
            })
          }
        })
        skus = attrSku
      })
      skus.forEach(it => {
        if (it) {
          it.spData = JSON.stringify(it)
        }
      })
      skus.forEach(it => {
        let sku = skuMap.get(it.spData)
        if (sku) {
          it.outSkuId = sku.outSkuId
          it.price = sku.price
          it.pic = sku.pic
          it.stock = sku.stock
          it.id = sku.id
        } else {
          it.outSkuId = null
          it.price = null
          it.pic = null
          it.stock = null
          it.id = null
        }

      })
      this.form.productAttr = JSON.stringify(this.productAttr)
      this.form.skuList = skus
    },
    // categoryChange(value) {
    //   if (Array.isArray(value)) {
    //     console.log(value.toString())
    //     this.form.productCategoryName = value.toString()
    //   } else {
    //     this.form.productCategoryName = null
    //   }
    //
    // },
    onBrandChange(value) {
      this.form.brandName = value
    },
    getInfo(id) {
      getPmsProduct(id).then(response => {
        const { albumPics } = response
        if (albumPics) {
          this.albumPics = albumPics.split(',')
        }
        this.form = response
        if (this.form.productAttr) {
          this.productAttr = JSON.parse(this.form.productAttr)
        }
        this.refreshSku()
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.albumPics) {
            this.form.albumPics = this.albumPics.toString()
          }
          if (this.form.categoryId && Array.isArray(this.form.categoryId)) {
            this.form.categoryId = this.form.categoryId.pop()
          }
          //商品价格没填时取sku的最低价
          if (!this.form.price) {
            this.form.price = 0.01
            this.form.price = Math.min.apply(Math, this.form.skuList.map(it => it.price))
          }
          this.form.price = 0.01
          if (this.form.id != null) {
            updatePmsProduct(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
            })
          } else {
            addPmsProduct(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
            })
          }
          this.cancel()
        } else {
          if (this.form.name) {
            this.$alert('请填写规格价格', '提示', {
              confirmButtonText: '确定'
            })
          } else {
            this.$alert('请填写商品名称', '提示', {
              confirmButtonText: '确定'
            })
          }
        }
      })
    },
    cancel() {
      this.$tab.closeOpenPage({ path: '/pms/product' })
    },
    changeName(s, idx, val) {
      s.options[idx].name = val
      if (s.options.length - 1 !== idx || s.options.length >= this.maxOptionNum) {
        return
      }
      s.options.push({ name: null })
    },
    addSkuSort() {
      this.productAttr.push({
        name: null,
        options: [{ name: null }]
      })
    },
    deleteSkuSort(idx) {
      this.productAttr.splice(idx)
    },
    deleteOption(s, idx) {
      s.options.splice(idx, 1)
    }
  }
}
</script>

<!--<style lang="c">-->
<!--.add-product-wrapper-->
<!--padding 12px-->
<!--          .content-->
<!--          margin 0 auto-->
<!--                   width 75%-->
<!--min-width 800px-->
<!--             .sku-wrapper-->
<!--             background-color #f7f8fa-->
<!--             padding 12px-->
<!--                       .sku_sorts-->
<!--                       .sku_sort-->
<!--                       background-color white-->
<!--                       margin-bottom 12px-->
<!--                                       .label-->
<!--                                       padding 8px-->
<!--                                                .values-->
<!--                                                padding 8px 0 0 8px-->
<!--                                                                 border-top 1px solid $border-color-->
<!--                                                                             display flex-->
<!--                                                                             flex-wrap wrap-->
<!--                                                                             .value-->
<!--                                                                             padding 0 32px 8px 0-->
<!--width 200px!important-->
<!--display flex-->
<!--align-items center-->
<!--.img-upload-mini .el-upload&#45;&#45;picture-card-->
<!--width: 48px;-->
<!--height: 48px;-->
<!--line-height: 57px;-->
<!--</style>-->

